var {
  VueLoaderPlugin
} = require('vue-loader'); // vue-loader解析还需要VueLoaderPlugin
var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin'); // 构建新HTML页面
var glob = require('glob');
var Cleanwebpackplugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: getEntry('./src/js/**/*.js'),
  output: {
    path: path.resolve(__dirname, '../dist'),
    publicPath: '/',
    filename: 'js/[name].js?v=1.0.1'
  },
  optimization: {
    splitChunks: {
      // chunks: 'all', // 只对入口文件处理
      // minSize: 30000,
      // minChunks: 1,
      // maxAsyncRequests: 5,
      // maxInitialRequests: 3,
      // name: true,
      cacheGroups: {
        // 自定义的快规则(公共的业务模块)
        commons: {
          chunks: "initial",
          name: 'common', // 共同模块的js名称
          minChunks: 2, // （默认值：1）分割前共享模块的最小块数
          // maxInitialRequests: 5, // （默认值3）入口点上的最大并行请求数
          // minSize: 0, // （默认值：30000）块的最小大小
        },
        vendor: {
          test: /node_modules/,
          chunks: "initial",
          name: "vendor",
          priority: 10,
          enforce: true
        },
      }
    }
  },
  module: {
    // 模块规则
    rules: [
      /* 用来解析vue后缀的文件 */
      {
        test: /.vue$/,
        use: ['vue-loader']
      },
      /* 用来解析css后缀的文件 */
      {
        test: /.(css|less)$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [{
            loader: 'css-loader',
            options: {
              // css压缩
              minimize: true
            }
          }, {
            loader: 'less-loader'
          }]
        })
      },
      // {
      //   test: /.less$/,
      //   use: ExtractTextPlugin.extract({
      //     fallback: "style-loader",
      //     use: ['css-loader', 'less-loader']
      //   }),
      // }
    ]
  },
  // 模块解析
  resolve: {
    // 自动解析确定的扩展,使用户在引入模块时不带扩展
    extensions: ['.js', '.vue', '.json'],
    alias: {
      // 创建vue别名，来确保模块引入变得更简单
      'vue': 'vue/dist/vue.js',
      '@': path.resolve(__dirname, '../src')
    }
  },
  plugins: [
    new Cleanwebpackplugin(['dist']),
    new VueLoaderPlugin(),
    // 启用 webpack 的模块热替换特性
    new webpack.HotModuleReplacementPlugin(),
    // 生成新的HTML页面
    new HtmlWebpackPlugin({
      template: 'index.html', // html的模版
      filename: 'index.html',
      // 选择哪些js模块的加载
      chunks: ['index', 'common', 'vendor']
    }),
    ...htmls(),
    // new HtmlWebpackPlugin({
    //   template: 'src/pages/home.html', // html的模版
    //   filename: 'pages/home.html',
    //   chunks: ['']
    // }),
    new ExtractTextPlugin({
      filename: 'css/[name].css'
    }),
  ]
}
// 自动生产HTML集合
function htmls() {
  // 通过 html-webpack-plugin 生成的 HTML 集合
  let HTMLPlugins = [];
  var pages = getEntry('./src/pages/**/*.html');
  for (var pathname in pages) {
    const htmlPlugin = new HtmlWebpackPlugin({
      filename: 'pages/' + pathname + '.html',
      template: pages[pathname],
      // 选择哪些js模块的加载
      chunks: [pathname, 'vendor', 'common'],
      minify: { // 传递 html-minifier 选项给 minify 输出
        // "removeAttributeQuotes": true,
        // "removeComments": true,
        // "removeEmptyAttributes": true,
      }
    });
    HTMLPlugins.push(htmlPlugin);
  }
  return HTMLPlugins;
}
// 自动生产入口文件
function getEntry(globPath) {
  var entries = {},
    pathname;
  glob.sync(globPath).forEach((filePath) => {
    pathname = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
    entries[pathname] = filePath;
  });
  return entries;
}